<script setup>
import { ref } from "vue";
import { getWormDataList } from "@/api/tiantai";
const popup = ref(null);
function open() {
  popup.value.open();
  getWormDataList({
    deviceAddr: 1127240040,
    beginTime: "2024-12-01 00:00:00",
    endTime: "2025-12-31 23:59:59",
    limit: 2,
    pages: 1,
  }).then((res) => {
    console.log(res);
    data.value = res.data.rows;
    console.log(data.value);
  });
}
const data = ref([]);
defineExpose({ open });
</script>

<template>
  <Popup width="1200" height="928" ref="popup" title="虫情测报灯">
    <div class="flex-center">
      <div class="left">
        <div class="title">最新一次采集的图片：</div>
        <div class="content">
          <img class="img" :src="data[0]?.imagesUrl" alt="" />
        </div>
        <div class="title">最新一次识别数量：</div>
        <div class="title">最新一次识别的种类数量：</div>
        <div class="title">最新一次识别结果：</div>
      </div>
      <div class="right">
        <div class="title">上一次采集的图片：</div>
        <div class="content">
          <img class="img" :src="data[1]?.imagesUrl" alt="" />
        </div>
        <div class="title">最新一次识别数量：</div>
        <div class="title">最新一次识别的种类数量：</div>
        <div class="title">最新一次识别结果：</div>
      </div>
    </div>
  </Popup>
</template>

<style lang="scss" scoped>
.left {
  width: 50%;
}
.right {
  width: 50%;
}
.content {
  margin-top: 20px;
  width: 500px;
  height: 500px;
  border: 1px solid #fff;
  .img{
    width: 100%;
    height: 100%;
  }
}
.title {
  font-size: 20px;
  color: #fff;
  margin-top: 20px;
}
</style>
